<template>
  <div class="login">
    <div class="login-con">
      <Card class="login-card" icon="log-in" title="修改密码" :bordered="false">
        <div class="form-con">
          <!-- <login-form @on-success-valid="handleSubmit"></login-form> -->
          <Form
            @keyup.enter.native="modify"
            ref="formInline"
            :model="formInline"
            :rules="ruleInline"
          >
            <FormItem prop="userName">
              <i-input type="text" placeholder="请输入账号" v-model="formInline.userName" clearable>
                <i class="iconfont icon-yonghu" slot="prepend"></i>
              </i-input>
            </FormItem>
            <FormItem prop="password">
              <i-input type="password" placeholder="请输入旧密码" v-model="formInline.password" clearable>
                <i class="iconfont icon-mima" slot="prepend"></i>
              </i-input>
            </FormItem>
            <FormItem prop="newPassword">
              <i-input
                type="password"
                placeholder="请输入新密码"
                v-model="formInline.newPassword"
                clearable
              >
                <i class="iconfont icon-mima1" slot="prepend"></i>
              </i-input>
            </FormItem>
            <FormItem prop="confirmNewPassword">
              <i-input
                type="password"
                placeholder="请确认新密码"
                v-model="formInline.confirmNewPassword"
                clearable
              >
                <i class="iconfont icon-mima1" slot="prepend"></i>
              </i-input>
            </FormItem>
            <FormItem>
              <Button type="info" long @click="modify">确认</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
    <Alert
      :isAlertVisible="isAlertVisible"
      :alertMsg="alertMsg"
      @alertCancel="isAlertVisible = false"
      @alertConfirm="modified"
      :isLogin="true"
    ></Alert>
  </div>
</template>

<script>
import Alert from "../../components/Alert/Alert.vue";
import { reqRestPwd } from "../../api";

export default {
  components: {
    Alert
  },
  data() {
    return {
      formInline: {
        userName: "",
        password: "",
        newPassword: "",
        confirmNewPassword: ""
      },
      alertMsg: "",
      isAlertVisible: false,
      isSuccess: false,
      ruleInline: {
        userName: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "旧密码不能为空",
            trigger: "blur"
          }
        ],
        newPassword: [
          {
            required: true,
            message: "新密码不能为空",
            trigger: "blur"
          }
        ],
        confirmNewPassword: [
          {
            required: true,
            message: "确认密码不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    async modify() {
      if (
        !this.formInline.userName ||
        !this.formInline.password ||
        !this.formInline.newPassword ||
        !this.formInline.confirmNewPassword
      ) {
        this.$Message.warning("请填写完整信息");
      } else if (
        this.formInline.newPassword !== this.formInline.confirmNewPassword
      ) {
        this.$Message.warning("新密码与确认密码不一致，请重新输入");
      } else {
        //进行后台验证，更新密码
        let params = {
          username: this.formInline.userName,
          pre_password: this.formInline.password,
          new_password: this.formInline.newPassword
        };
        let result = await reqRestPwd(params);
        if (result.code === 6000) {
          this.alertMsg = "密码修改成功，请重新登录";
          this.isAlertVisible = true;
          this.isSuccess = true;
        }
        else{
          this.alertMsg = "密码修改失败";
          this.isAlertVisible = true;
          this.isSuccess = false;     
        }
      }
    },
    modified() {
      if (this.isSuccess === true) {
        this.isAlertVisible = false;
        this.$router.replace({ name: "login" });
      } else {
        this.formInline.password = "";
        this.formInline.newPassword = "";
        this.formInline.confirmNewPassword = "";
        this.isAlertVisible = false;
      }
    }
  }
};
</script>

<style lang="less">
</style>